<template>
  <div>
    <div class="search-title">查询条件</div>
    <div class="search-box">
      <a-form-model :model="searchForm" layout="inline" ref="searchForm" class="searchForm">
        <a-form-model-item label="答题人" prop="userId">
          <a-input v-model="searchForm.quizUserName" :allowClear=true placeholder="请输入答题人姓名"/>
        </a-form-model-item>
        <a-form-model-item class="searchButton">
          <a-button type="primary" @click="getSearch">查询</a-button>
          <a-button type="default" @click="restSearch('searchForm')">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>

    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
      rowKey="quizId"
      :scroll="{x:1500,y: this.$getViewportSize().height-300 }">
      <template
        v-for="col in columns"
        :slot="col.key"
        slot-scope="text,record"
      >
        <span v-if="col.key=='action'">
          <a @click="viewDetail(record)"><a-icon class="iconBtn" type="eye" />查看详情</a>
        </span>
        <span v-else-if="col.key=='isCorrect'">
          <a-tag :color="text? 'green' : 'red'">
            {{ text? '正确' : '错误' }}
          </a-tag>
        </span>
        <span v-else-if="col.key=='userAnswer'">
          <template v-if="record.topicTypeName === '判断题'">
            {{ text === '1' ? '正确' : '错误' }}
          </template>
          <template v-else>
            <TableTootip :content="text"></TableTootip>
          </template>
        </span>
        <span v-else>
          <TableTootip :content="text"></TableTootip>
        </span>
      </template>
    </a-table>
    <a-pagination
      show-size-changer
      :total="totalPage"
      :current="pageIndex"
      :pageSize="pageSize"
      @showSizeChange="onShowSizeChange"
      @change="onChangePage"
      style="float: right;margin-top: 15px"
    />

    <a-modal
      centered="true"
      v-model="visible"
      :title="title"
      width="60%"
      @ok="handleOk">
      <a-form-model
        :model="detail"
        :label-col="{span: 6}"
        :wrapper-col="{span: 16}"
        ref="detailForm">
        <a-form-model-item label="答题人">
          <a-input v-model="detail.userName" disabled />
        </a-form-model-item>

        <a-form-model-item label="用户答案">
          <a-input v-model="detail.userAnswer" disabled />
        </a-form-model-item>
        <a-form-model-item label="是否正确">
          <a-tag :color="detail.isCorrect? 'green' : 'red'">
            {{ detail.isCorrect ? '正确' : '错误' }}
          </a-tag>
        </a-form-model-item>
        <a-form-model-item label="答题时间">
          <a-input v-model="detail.answerTime" disabled />
        </a-form-model-item>
        <a-form-model-item label="题目详情">
          <!-- 题目详情容器 -->
          <div class="question-detail-container">
            <!-- 选择题样式 -->
            <div v-if="detail.topicTypeName === '选择题'" class="choice-question">
              <div class="question-content">
                <div class="question-title">题目：</div>
                <div class="question-text">{{ detail.content }}</div>
              </div>

              <div class="options-grid">
                <div class="option-item">
                  <span class="option-label">A：</span>
                  <span class="option-text">{{ detail.optionA }}</span>
                </div>
                <div class="option-item">
                  <span class="option-label">B：</span>
                  <span class="option-text">{{ detail.optionB }}</span>
                </div>
                <div class="option-item">
                  <span class="option-label">C：</span>
                  <span class="option-text">{{ detail.optionC }}</span>
                </div>
                <div class="option-item">
                  <span class="option-label">D：</span>
                  <span class="option-text">{{ detail.optionD }}</span>
                </div>
              </div>

              <div class="correct-answer">
                <span class="answer-label">正确答案：</span>
                <span class="answer-value">{{ detail.correctAnswer }}</span>
              </div>
            </div>

            <!-- 判断题样式 -->
            <div v-else class="judgment-question">
              <div class="question-content">
                <div class="question-title">题目：</div>
                <div class="question-text">{{ detail.content }}</div>
              </div>

              <div class="correct-answer">
                <span class="answer-label">正确答案：</span>
                <a-tag :color="detail.correctAnswer === '1' ? 'green' : 'red'" class="answer-tag">
                  {{ detail.correctAnswer === '1' ? '正确' : '错误' }}
                </a-tag>
              </div>
            </div>
          </div>
        </a-form-model-item>





<!--        <a-form-model-item label="题目详情">-->
<!--          <div v-if="detail.topicTypeName === '选择题'">-->
<!--            <p><strong></strong>{{ detail.content }}</p>-->
<!--            <p><strong>选项A：</strong>{{ detail.optionA }}</p>-->
<!--            <p><strong>选项B：</strong>{{ detail.optionB }}</p>-->
<!--            <p><strong>选项C：</strong>{{ detail.optionC }}</p>-->
<!--            <p><strong>选项D：</strong>{{ detail.optionD }}</p>-->
<!--          </div>-->
<!--          <div v-else>-->
<!--            <p><strong></strong>{{ detail.content }}</p>-->
<!--            <p><strong>正确答案：</strong>{{ detail.userAnswer === '1' ? '正确' : '错误' }}</p>-->
<!--          </div>-->
<!--        </a-form-model-item>-->
      </a-form-model>
      <template slot="footer">
        <a-button key="back" @click="visible = false">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import {req} from '../../api/axiosFun'
import preventBack from 'vue-prevent-browser-back';
import TableTootip from '../../components/TableTootip.vue'
export default {
  name: "QuizRecord",
  mixins: [preventBack],
  components:{
    TableTootip
  },
  data() {
    return {
      QX:{},
      title: '答题记录详情',
      searchForm: {
        quizId: '',
        quizUserName: '',
        topicId: ''
      },
      visible: false,
      detail: {},
      dataList: [],
      columns,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
  filters: {
    formatDateTime(value) {
      if (!value) return '';
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  mounted() {
    this.getQuizRecordList();
  },
  methods: {
    //查询
    getSearch() {
      this.pageIndex = 1
      this.getQuizRecordList()
    },
    /* 重置查询 */
    restSearch(form) {
      this.$refs[form].resetFields();
      this.pageIndex = 1
      this.getQuizRecordList();
    },
    /* 查看详情 */
    viewDetail(record) {
      this.loading = true
      req("post", '/quizRecord/getBQuizRecord', {
        quizId: record.quizId
      }).then(res => {
        this.loading = false
        if (res.result === 'success') {
          this.detail = res.data;
          this.visible = true;
        }
      });
    },
    /* 导出数据 */
    exportData() {
      this.loading = true;
      req("post", '/quizRecord/exportQuizRecord', this.searchForm)
        .then(res => {
          if (res.result === 'success') {
            window.open(res.data.url);
          }
          this.loading = false;
        }).catch(e => {
          this.loading = false;
        });
    },
    /* 改变页数事件 */
    onChangePage(page, pageSize) {
      this.pageIndex = page;
      this.getQuizRecordList();
    },
    /* 改变每页显示条数 */
    onShowSizeChange(current, pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.getQuizRecordList();
    },
    /* 答题记录列表 */
    getQuizRecordList() {
      this.loading = true;
      this.searchForm.page = this.pageIndex;
      this.searchForm.rows = this.pageSize;
      req("post", `/quizRecord/list`, this.searchForm)
        .then(res => {
          if (res.result === 'success') {
            this.dataList = res.data;
            this.totalPage = res.page.totalResult;
            this.QX = res.QX;
          }
          this.loading = false;
        }).catch(e => {
          this.loading = false;
        });
    },
  }
}
const columns = [
  {
    title: '序号',
    align: 'center',
    width: '40px',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '答题人',
    align: 'center',
    dataIndex: 'userName',
    key: 'userName',
    width: 100,
    scopedSlots: { customRender: 'userName' }
  },

  {
    title: '用户答案',
    align: 'center',
    dataIndex: 'userAnswer',
    key: 'userAnswer',
    width: 100,
    scopedSlots: { customRender: 'userAnswer' }
  },
  {
    title: '是否正确',
    align: 'center',
    dataIndex: 'isCorrect',
    key: 'isCorrect',
    width: 100,
    scopedSlots: { customRender: 'isCorrect' }
  },
  {
    title: '答题时间',
    dataIndex: 'answerTime',
    align:'center',
    key: 'answerTime',
    scopedSlots: { customRender: 'answerTime' },
    width: 140
  },
  {
    title: '创建时间',
    dataIndex: 'createDatetime',
    align:'center',
    key: 'createDatetime',
    scopedSlots: { customRender: 'createDatetime' },
    width: 140
  },
  {
    align: 'center',
    title: '操作',
    width: 100,
    fixed: 'right',
    dataIndex: 'action',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },
];
</script>

<style scoped>
@import "../../assets/css/maincss.css";

/* 添加以下样式 */
.question-detail-container {
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
  margin-top: 10px;
}

.question-content {
  display: flex;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e8e8e8;
}

.question-title {
  font-weight: 600;
  color: #333;
  min-width: 50px;
}

.question-text {
  flex: 1;
  color: #555;
  line-height: 2.8;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.2s;
}

.option-item:hover {
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.option-label {
  font-weight: 600;
  color: #1890ff;
  margin-right: 8px;
}

.option-text {
  flex: 1;
  color: #555;
}

.correct-answer {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #e6f7ff;
  border-radius: 4px;
  border-left: 3px solid #1890ff;
}

.answer-label {
  font-weight: 600;
  color: #333;
  margin-right: 8px;
}

.answer-value {
  font-weight: 500;
  color: #52c41a;
}

.answer-tag {
  font-weight: 500;
  font-size: 14px;
}

.judgment-question .correct-answer {
  background: #f6ffed;
  border-left-color: #52c41a;
}
/* 添加以下样式确保标签和内容水平对齐 */
.question-detail {
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
}

/* 通用行样式 - 确保标签和内容在同一水平线 */
.question-line,
.option-line,
.answer-line {
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  margin-bottom: 12px;
  line-height: 1.6;
}

/* 标签样式 - 固定宽度确保对齐 */
.question-label,
.option-label,
.answer-label {
  font-weight: 600;
  color: #333;
  min-width: 70px; /* 固定标签宽度 */
  text-align: right;
  padding-right: 8px;
  flex-shrink: 0; /* 防止宽度压缩 */
}

/* 内容样式 - 自动填充剩余空间 */
.question-content,
.option-content,
.answer-content {
  flex: 1;
  color: #555;
}

/* 选择题选项添加背景区分 */
.option-line {
  padding: 6px 10px;
  background: #fff;
  border-radius: 4px;
  border-left: 3px solid #1890ff;
}

/* 判断题答案标签样式 */
.answer-line {
  padding: 8px 10px;
  background: #e6f7ff;
  border-radius: 4px;
  margin-top: 10px;}
</style>
